{% extends "base.html" %}

{% block title %}管理后台 - {{ app_name }}{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2>
                <i class="fas fa-tachometer-alt me-2"></i>
                管理后台
            </h2>
            <span class="badge bg-primary fs-6">{{ company_name }}</span>
        </div>
        
        <!-- 统计卡片 -->
        <div class="row g-4 mb-4">
            <div class="col-12 col-sm-6 col-md-3">
                <a href="/admin/users" class="text-decoration-none">
                    <div class="card border-0 shadow-sm h-100 card-hover transition-all duration-300">
                        <div class="card-body">
                            <div class="d-flex flex-column h-100">
                                <div class="d-flex justify-between items-start mb-3">
                                    <div class="flex-shrink-0">
                                        <div class="bg-primary bg-gradient rounded-xl p-3 shadow-md">
                                            <i class="fas fa-users text-white fa-lg"></i>
                                        </div>
                                    </div>
                                </div>
                                <div class="flex-grow-1">
                                    <h6 class="card-title text-muted mb-1 text-sm font-medium">用户总数</h6>
                                    <h3 class="mb-2 text-dark font-bold text-2xl stat-number counter">{{ user_count }}</h3>
                                    <small class="text-success d-flex items-center">
                                        <i class="fas fa-user-plus me-1"></i>
                                        <span>活跃: {{ active_users }}</span>
                                        <span class="mx-1">|</span>
                                        <span>今日新增: {{ today_users }}</span>
                                    </small>
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            
            <div class="col-12 col-sm-6 col-md-3">
                <a href="/passwords" class="text-decoration-none">
                    <div class="card border-0 shadow-sm h-100 card-hover transition-all duration-300">
                        <div class="card-body">
                            <div class="d-flex flex-column h-100">
                                <div class="d-flex justify-between items-start mb-3">
                                    <div class="flex-shrink-0">
                                        <div class="bg-success bg-gradient rounded-xl p-3 shadow-md">
                                            <i class="fas fa-key text-white fa-lg"></i>
                                        </div>
                                    </div>
                                </div>
                                <div class="flex-grow-1">
                                    <h6 class="card-title text-muted mb-1 text-sm font-medium">密码总数</h6>
                                    <h3 class="mb-2 text-dark font-bold text-2xl stat-number counter">{{ password_count }}</h3>
                                    <small class="text-info d-flex items-center">
                                        <i class="fas fa-plus me-1"></i>
                                        <span>今日新增: {{ today_passwords }}</span>
                                    </small>
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            
            <div class="col-12 col-sm-6 col-md-3">
                <a href="/admin/shares" class="text-decoration-none">
                    <div class="card border-0 shadow-sm h-100 card-hover transition-all duration-300">
                        <div class="card-body">
                            <div class="d-flex flex-column h-100">
                                <div class="d-flex justify-between items-start mb-3">
                                    <div class="flex-shrink-0">
                                        <div class="bg-warning bg-gradient rounded-xl p-3 shadow-md">
                                            <i class="fas fa-share-alt text-white fa-lg"></i>
                                        </div>
                                    </div>
                                </div>
                                <div class="flex-grow-1">
                                    <h6 class="card-title text-muted mb-1 text-sm font-medium">分享总数</h6>
                                    <h3 class="mb-2 text-dark font-bold text-2xl stat-number counter">{{ share_count }}</h3>
                                    <small class="text-warning d-flex items-center">
                                        <i class="fas fa-plus me-1"></i>
                                        <span>今日新增: {{ today_shares }}</span>
                                        <span class="mx-1">|</span>
                                        <span>访问: {{ today_access }}</span>
                                    </small>
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            
            <div class="col-12 col-sm-6 col-md-3">
                <a href="/admin/settings" class="text-decoration-none">
                    <div class="card border-0 shadow-sm h-100 card-hover transition-all duration-300">
                        <div class="card-body">
                            <div class="d-flex flex-column h-100">
                                <div class="d-flex justify-between items-start mb-3">
                                    <div class="flex-shrink-0">
                                        <div class="bg-info bg-gradient rounded-xl p-3 shadow-md">
                                            <i class="fas fa-database text-white fa-lg"></i>
                                        </div>
                                    </div>
                                </div>
                                <div class="flex-grow-1">
                                    <h6 class="card-title text-muted mb-1 text-sm font-medium">数据库大小</h6>
                                    <h3 class="mb-2 text-dark font-bold text-2xl stat-number">{{ db_size }}</h3>
                                    <small class="text-info d-flex items-center">
                                        <i class="fas fa-server me-1"></i>
                                        <span>SQLite</span>
                                    </small>
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
        </div>
        
        <!-- 系统状态监控 -->
        <div class="row g-4 mb-4">
            <div class="col-md-12">
                <div class="card border-0 shadow-sm">
                    <div class="card-header bg-transparent border-0">
                        <h5 class="card-title mb-0">
                            <i class="fas fa-server me-2"></i>
                            系统状态监控
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row g-4">
                            <!-- 系统运行时间 -->
                            <div class="col-md-3">
                                <div class="text-center p-4 bg-light rounded-lg">
                                    <h6 class="text-muted mb-1">系统运行时间</h6>
                                    <h5 class="mb-0" id="systemUptime">{{ uptime }}</h5>
                                    <small class="text-muted">已运行{{ uptime }}</small>
                                </div>
                            </div>
                            
                            <!-- 内存使用率 -->
                            <div class="col-md-3">
                                <div class="text-center p-4 bg-light rounded-lg">
                                    <h6 class="text-muted mb-1">内存使用率</h6>
                                    <h5 class="mb-0" id="memoryPercent">{{ "%.1f"|format(memory_percent) }}%</h5>
                                    <small class="text-muted" id="memoryDetails">{{ memory_used }} / {{ memory_total }}</small>
                                </div>
                            </div>
                            
                            <!-- 磁盘使用率 -->
                            <div class="col-md-3">
                                <div class="text-center p-4 bg-light rounded-lg">
                                    <h6 class="text-muted mb-1">磁盘使用率</h6>
                                    <h5 class="mb-0" id="diskPercent">{{ "%.1f"|format(disk_percent) }}%</h5>
                                    <small class="text-muted" id="diskDetails">{{ disk_used }} / {{ disk_total }}</small>
                                </div>
                            </div>
                            
                            <!-- 数据库大小 -->
                            <div class="col-md-3">
                                <div class="text-center p-4 bg-light rounded-lg">
                                    <h6 class="text-muted mb-1">数据库大小</h6>
                                    <h5 class="mb-0" id="databaseSize">{{ db_size }}</h5>
                                    <small class="text-muted">SQLite</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 实时统计图表 -->
        <div class="row g-4 mb-4">
            <div class="col-md-8">
                <div class="card border-0 shadow-sm">
                    <div class="card-header bg-light">
                        <h5 class="mb-0">
                            <i class="fas fa-chart-area me-2"></i>
                            最近7天访问统计
                        </h5>
                    </div>
                    <div class="card-body">
                        <canvas id="accessChart" width="400" height="200"></canvas>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="card border-0 shadow-sm">
                    <div class="card-header bg-light">
                        <h5 class="mb-0">
                            <i class="fas fa-chart-pie me-2"></i>
                            用户角色分布
                        </h5>
                    </div>
                    <div class="card-body">
                        <canvas id="roleChart" width="200" height="200"></canvas>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 快捷操作 -->
        <div class="row g-4">
            <div class="col-md-6">
                <div class="card border-0 shadow-sm">
                    <div class="card-header bg-light">
                        <h5 class="mb-0">
                            <i class="fas fa-users me-2"></i>
                            用户管理
                        </h5>
                    </div>
                    <div class="card-body">
                        <p class="card-text text-muted">管理系统用户，查看用户信息，创建新用户账号。</p>
                        <div class="d-grid gap-2">
                            <a href="/admin/users" class="btn btn-primary">
                                <i class="fas fa-user-plus me-2"></i>
                                管理用户
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            
            
            <div class="col-md-6">
                <div class="card border-0 shadow-sm">
                    <div class="card-header bg-light">
                        <h5 class="mb-0">
                            <i class="fas fa-cog me-2"></i>
                            系统设置
                        </h5>
                    </div>
                    <div class="card-body">
                        <p class="card-text text-muted">配置系统参数，管理应用设置和安全策略。</p>
                        <div class="d-grid gap-2">
                            <a href="/admin/settings" class="btn btn-warning">
                                <i class="fas fa-tools me-2"></i>
                                系统设置
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
$(document).ready(function() {
    // 加载实时统计数据
    loadSystemStats();
    
    // 每30秒刷新一次统计数据
    setInterval(loadSystemStats, 30000);
    
    // 初始化图表
    initCharts();
});

function loadSystemStats() {
    $.ajax({
        url: '/api/system/stats',
        method: 'GET',
        success: function(response) {
            // 更新统计数据
            $('#activeUsers').text(response.basic_stats.active_users || 0);
            $('#todayPasswords').text(response.basic_stats.today_passwords || 0);
            $('#todayAccess').text(response.basic_stats.today_access || 0);
            $('#systemUptime').text(response.basic_stats.uptime || '0天');
            
            // 更新内存使用率
            const memoryPercent = response.basic_stats.memory_percent || 0;
            $('#memoryPercent').text(memoryPercent.toFixed(1) + '%');
            $('#memoryDetails').text((response.basic_stats.memory_used || 'N/A') + ' / ' + (response.basic_stats.memory_total || 'N/A'));
            
            // 更新磁盘使用率
            const diskPercent = response.basic_stats.disk_percent || 0;
            $('#diskPercent').text(diskPercent.toFixed(1) + '%');
            $('#diskDetails').text((response.basic_stats.disk_used || 'N/A') + ' / ' + (response.basic_stats.disk_total || 'N/A'));
            
            // 更新数据库大小
            const dbSize = response.basic_stats.db_size || '未知';
            $('#databaseSize').text(dbSize);
            
            // 更新图表数据
            updateCharts(response);
        },
        error: function(xhr) {
            console.error('加载系统统计失败:', xhr);
        }
    });
}

function initCharts() {
    // 访问统计图表
    const accessCtx = document.getElementById('accessChart').getContext('2d');
    window.accessChart = new Chart(accessCtx, {
        type: 'line',
        data: {
            labels: [],
            datasets: [{
                label: '访问次数',
                data: [],
                borderColor: 'rgb(75, 192, 192)',
                backgroundColor: 'rgba(75, 192, 192, 0.2)',
                tension: 0.1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
    
    // 用户角色分布图表
    const roleCtx = document.getElementById('roleChart').getContext('2d');
    window.roleChart = new Chart(roleCtx, {
        type: 'doughnut',
        data: {
            labels: ['管理员', '普通用户'],
            datasets: [{
                data: [0, 0],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.8)',
                    'rgba(54, 162, 235, 0.8)'
                ],
                borderWidth: 2
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'bottom'
                }
            }
        }
    });
}

function updateCharts(data) {
    // 更新访问统计图表
    if (data.recent_accesses && window.accessChart) {
        const labels = data.recent_accesses.map(item => item.date);
        const values = data.recent_accesses.map(item => item.count);
        
        window.accessChart.data.labels = labels;
        window.accessChart.data.datasets[0].data = values;
        window.accessChart.update();
    }
    
    // 更新用户角色分布图表
    if (data.role_distribution && window.roleChart) {
        window.roleChart.data.datasets[0].data = [
            data.role_distribution.admin || 0,
            data.role_distribution.user || 0
        ];
        window.roleChart.update();
    }
}
</script>
{% endblock %}

{% block extra_css %}
<style>
.card-hover {
    transition: all 0.3s ease;
    cursor: pointer;
}

.card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.15) !important;
}

.card {
    transition: all 0.3s ease;
}

.bg-gradient {
    background: linear-gradient(45deg, var(--bs-primary), #0a58ca) !important;
}

.bg-success.bg-gradient {
    background: linear-gradient(45deg, var(--bs-success), #157347) !important;
}

.bg-info.bg-gradient {
    background: linear-gradient(45deg, var(--bs-info), #0284c7) !important;
}

.bg-warning.bg-gradient {
    background: linear-gradient(45deg, var(--bs-warning), #d97706) !important;
}

/* 统计卡片链接样式 */
.text-decoration-none:hover .card-hover {
    text-decoration: none !important;
}

.text-decoration-none:hover h3 {
    color: #0d6efd !important;
    transition: color 0.3s ease;
}

/* 系统状态指示器 */
.status-indicator {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 5px;
}

.status-normal {
    background-color: #28a745;
    animation: pulse 2s infinite;
}

.status-warning {
    background-color: #ffc107;
}

.status-danger {
    background-color: #dc3545;
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

/* 统计数字样式 */
.stat-number {
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.counter {
    transition: all 0.5s ease;
}

/* 响应式调整 */
@media (max-width: 992px) {
    .stat-number {
        font-size: 1.5rem;
    }
}

@media (max-width: 768px) {
    .card-hover {
        transform: none;
    }
    
    .card-hover:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(0,0,0,0.12) !important;
    }
    
    .stat-number {
        font-size: 1.3rem;
    }
}

@media (max-width: 576px) {
    .card-hover:hover {
        transform: none;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
    }
    
    .stat-number {
        font-size: 1.2rem;
    }
}

/* 动画效果 */
.transition-all {
    transition: all 0.3s ease;
}

duration-300 {
    transition-duration: 300ms;
}

transition-opacity {
    transition-property: opacity;
}

/* 图表容器 */
.chart-container {
    position: relative;
    height: 300px;
    width: 100%;
}
</style>
{% endblock %}